<template>
  <div id="DismissClassContainer">
    <div id="headTitle">创建班级</div>
    <div id="classInfoContainer">
      <div id="head">班级信息</div>
      <div id="classInfo">
        <div class="rowInfo">班级ID：{{ userClassInfo.classID }}</div>
        <div class="rowInfo">班级：{{ userClassInfo.className }}</div>
        <div class="rowInfo">班级人数：{{ userClassInfo.classSize }}</div>
        <div class="rowLastInfo">班费余额：{{ userClassInfo.classExBala }}</div>
        <el-button class="rowInfo" id="button" type="primary" @click="createIsIntoClass">
          创建班级
        </el-button>
      </div>
    </div>
  </div>
  <div class="changeAndCreateBox">
    <el-dialog v-model="dialogFormVisible" title="创建班级" width="40%">
      <el-form :model="className" label-width="100px" style="padding-right: 50px">
        <el-form-item label="班级名：">
          <el-input v-model="className" autocomplete="off" placeholder="请输入标题"/>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="createClass">确认</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import "../assets/CreateClass.css";
import "../assets/DismissClass.css";
import prompt from "@/utils/prompt.js";
import request from "@/utils/requset.js";
import router from "@/router";

export default {
    name: 'classInfo',
    data() {
        return {
            classData: [],
            userClassInfo: {
              classID: "",
              className: "",
              classSize: "",
              classExBala: ""
          },
            className: '',
          dialogFormVisible:false
        }
    },
    created() {
        this.isIntoClass();
    },
    methods: {
      createIsIntoClass(){
        if(this.isIntoClass()){
          return router.push({path: "home"});
        }
        this.dialogFormVisible = true;
      },
        isIntoClass() {
            let classID = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).classID : 0;
            if (classID < 1) {
                return false;
            }
            prompt("已加入班级，无需创建！", "error");
            router.push({path: "home"});
            return true;
        },
        createClass() {
            if (this.className == '') {
                prompt("班级名不能为空", "error");
                return;
            }
            let token = localStorage.getItem("token");
            if (token === "") {
                return;
            }
            request.get('/class/createClass', {
                params: {
                    token: token,
                    className: this.className
                }
            }).then(result => {
                prompt(result.message, result.type);
                if (result.data.createdClass === null) {
                    return;
                }
              this.userClassInfo = result.data.createdClass[0];
              this.dialogFormVisible = false;
            })
        }
    }
}
</script>